<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小峰音乐播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            background-color: rgba(209, 225, 63, 0.5);
            box-sizing: border-box;
        }

        .top {
            width: 100%;
            height: 55px;
            line-height: 55px;
            background-color: #fff8a8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top .logo {
            font-size: 18px;
            font-weight: 600;
            color: #bdb2b2;
            padding-left: 100px;
            letter-spacing: 2px;
        }

        .top .logo img {
            width: 50px;
            vertical-align: bottom;
            margin-bottom: 2px;
        }

        .top .user {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-right: 80px;
            color: #115049;
        }

        .top .user img {
            width: 45px;
            object-fit: contain;
            border-radius: 50%;
            vertical-align: middle;
            margin-bottom: 2px;
            margin-right: 20px;
            box-shadow: 1px 1px 5px #ccc;
        }

        .musicArea {
            width: 100%;
            box-sizing: border-box;
            padding: 30px 130px;
            display: flex;
        }

        .musicArea .musicList .title,
        .musicArea .musicList .item {
            display: flex;
            align-items: center;
            font-size: 18px;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e3d498;
        }

        .musicArea .musicList .item {
            box-sizing: border-box;
            padding-left: 8px;
            font-size: 16px;
            color: #16635a;
        }

        .musicArea .musicList .title div,
        .musicArea .musicList .item div {
            width: 200px;
        }

        .musicArea .musicList .title div:first-child,
        .musicArea .musicList .item div:first-child {
            width: 500px;
        }

        .musicArea .musicList .item .music_name:hover {
            cursor: pointer;
            color: #a8a0a0;
        }

        .musicArea .localList {
            flex: 1;
            height: 700px;
            margin-left: 50px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 15px 20px;
        }

        .musicArea .localList h4 {
            text-align: center;
        }

        .musicArea .localList .title,
        .musicArea .localList .item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e3d498;
        }

        .musicArea .localList .title div,
        .musicArea .localList .item div {
            width: 120px;
            padding: 5px 0;
        }

        .musicArea .localList .title div:first-child,
        .musicArea .localList .item div:first-child {
            width: 200px;
        }

        .musicArea .localList .item {
            font-size: 14px;
        }

        .musicArea .localList .item div:last-child:hover {
            cursor: pointer;
            color: #7411b1;
        }

        .musicArea .showInfo {
            width: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .musicArea .showInfo .music_Img {
            width: 220px;
            height: 220px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 50px;
        }

        .musicArea .showInfo .music_Img img {
            width: 100%;
            object-fit: contain;
        }

        .musicArea .showInfo .actived {
            animation: musicPic 10s linear infinite;
        }

        .musicArea .showInfo .Info_name {
            font-size: 18px;
            color: #6c5e5e;
        }

        .musicArea .showInfo .Info_name div {
            text-align: center;
            margin-bottom: 10px;
        }

        /* 图片动画 */
        @keyframes musicPic {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .control {
            position: absolute;
            left: 50px;
            bottom: 20px;
            width: 90vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 0 50px;
            box-sizing: border-box;
        }

        .control img {
            width: 35px;
            object-fit: contain;
            cursor: pointer;
        }

        .control .left {
            display: flex;
            align-items: center;
            margin-right: 45px;
        }

        .control .left div {
            padding: 0 20px;
        }

        .control .left div .play {
            width: 50px;
        }

        .control .center {
            width: 55vw;
            margin-right: 20px;
        }

        .control .center .detial {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 50px;
        }

        .control .center .jdu,
        .control .right .volume .volumescale {
            position: relative;
            width: 100%;
            height: 3px;
            border-radius: 3px;
            font-size: 0px;
            background-color: #e4e4e4;
            margin-bottom: 20px;
        }

        .control .center .jdu div,
        .control .right .volume .volumescale div {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0px;
            height: 3px;
            width: 0;
            background-color: #3be3ff;
        }

        .control .center .jdu span,
        .control .right .volume .volumescale span {
            position: absolute;
            left: -2px;
            top: -3px;
            width: 10px;
            height: 10px;
            background-color: rgb(0, 145, 255);
            border-radius: 50%;
            cursor: pointer;
        }

        .control .right .volume .volumescale {
            margin-left: 10px;
            margin-bottom: 0;
        }

        .control .right .volume .volumescale span {
            background-color: #736d6d;
        }

        .control .right .volume .volumescale div {
            background-color: #715bee;
        }

        .control .right {
            display: flex;
        }

        .control .right .toggle {
            text-align: center;
            width: 100px;
            margin: 0 30px;
            height: 35px;
            line-height: 35px;
            background-color: rgba(201, 195, 195, 0.25);
            border-radius: 15px;
        }

        .control .right .toggle:hover {
            cursor: pointer;
            color: #fff;
            background-color: rgba(59, 56, 56, 0.25);
        }

        .control .right .volume {
            display: flex;
            align-items: center;
            height: 35px;
            line-height: 35px;
        }

        .control .right .volume .volumescale {
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="top">
        <div class="logo">
            <img src="./img/yinyue.png" alt="" /> 小峰简约音乐播放器
        </div>
        <div class="user">
            <div class="headImg">
                <img
                    src="https://p5-pro.a.yximgs.com/uhead/AB/2023/01/13/16/BMjAyMzAxMTMxNjAzMDhfMzIwNTU1NDExXzJfaGQ3NDVfNDc4_s.jpg" />
            </div>
            <div class="name">凌小峰[编程区]</div>
        </div>
    </div>

    <!-- 音乐区域 -->
    <div class="musicArea">
        <!-- 播放列表 -->
        <div class="musicList">
            <div class="title">
                <div>歌名</div>
                <div>歌手</div>
                <div></div>
            </div>
            <div class="item">
                <div class="music_name">七里香</div>
                <div class="music_authod">周杰伦</div>
            </div>
        </div>
        <!-- 右侧展示当前歌曲 -->
        <div class="showInfo">
            <div class="music_Img"><img
                    src="https://gimg3.baidu.com/yule/src=http%3A%2F%2Fgips1.baidu.com%2Fit%2Fu%3D2891255342%2C1260397678%26fm%3D3007%26app%3D3007%26f%3DJPEG%3Fw%3D300%26h%3D300&refer=http%3A%2F%2Fwww.baidu.com&app=2019&size=w931&n=0&g=0n&q=75&fmt=auto?sec=1678035600&t=50d115389e822161610434af2459c89b"
                    alt=""></div>
            <div class="Info_name">
                <div>七里香</div>
                <div>周杰伦</div>
            </div>

        </div>
    </div>
    </div>
    <!-- 播放控制器 -->
    <div class="control">
        <audio
            src="http://ws.stream.qqmusic.qq.com/C400002o6mJ80nAIsK.m4a?guid=283013486&vkey=AD1B9C1E7314604B3B9E61F2B8F19B634FFCE95FB4649F726B2FD1A55DEAC55E47FB96F08C3524C8CE73E3A09BCD880D4B4A29E589B64A84&uin=&fromtag=120032"></audio>
        <div class="left">
            <div id="playUp"><img src="./img/left.png" alt="" /></div>
            <div id="playBtn"><img class="play" src="./img/play.png" alt="" /></div>
            <div id="playDowm"><img src="./img/right.png" alt="" /></div>
        </div>
        <div class="center">
            <div class="detial">
                <div class="left" id="playMusicInfo">七里香 -
                    周杰伦</div>
                <div class="right" id="playMusicTime">00 : 00 / -- : --</div>
            </div>
            <div class="jdu" id="jdubar">
                <div></div>
                <span id="jdubtn"></span>
            </div>
        </div>
        <div class="right">
            <div class="volume">
                <img id="mute" src="./img/yinliang.png" alt="" />
                <div class="volumescale" id="volumebar">
                    <div></div>
                    <span id="volumebtn"></span>
                </div>
            </div>
        </div>
    </div>
    <script>
        let Audio = document.querySelector("audio")
        // 播放按钮
        let playBtn = document.querySelector('#playBtn')
        let playMusicTime = document.querySelector('#playMusicTime')
        let jdubtn = document.querySelector('#jdubtn')
        let jdubar = document.querySelector('#jdubar')
        let jdstep = jdubar.querySelector("div")

        // 标识：是否播放
        let isPlaying = false
        let nowPlayTime = 0
        playBtn.onclick = function () {
            // 播放状态，需要暂停
            if (isPlaying) {
                Audio.pause()
                isPlaying = false
                playBtn.querySelector('img').src = './img/play.png'
            } else {
                // 继续播放
                isPlaying = true
                Audio.play()
                playBtn.querySelector('img').src = './img/stop.png'
                let playTimer = setInterval(() => {
                    let duration = Math.round(Audio.duration)
                    if (nowPlayTime == duration) {
                        clearInterval(playTimer)
                    }
                    nowPlayTime = Math.round(Audio.currentTime)
                    playMusicTime.innerText = formatTime(nowPlayTime) + " / " + formatTime(duration)
                    let progre = nowPlayTime / Math.round(Audio.duration)
                    jdubtn.style.left = jdubar.offsetWidth * progre + 'px'
                    jdstep.style.width = jdubar.offsetWidth * progre + 'px'

                }, 1000)
            }
        }

        // 格式化时间
        function formatTime(time) {
            let m = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60)
            let s = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60)
            return m + ':' + s
        }
    </script>
</body>

</html>